import React, { Component } from 'react';
class canvasPractice extends Component {
    constructor() {
        super()
    }
    componentDidMount() {
        this.draw();
    }
    draw = () => {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            // ctx.fillStyle = 'rgb(200, 0, 0)';
            // ctx.fillRect(10, 10, 50, 50);

            // ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
            // ctx.fillRect(30, 30, 50, 50);

            ctx.fillRect(25, 25, 100, 100);
            ctx.clearRect(45, 45, 60, 60);
            ctx.strokeRect(50, 50, 50, 50);
        }
        var canvas2 = document.getElementById('tutorial2');
        if (canvas2.getContext) {
            var ctx2 = canvas2.getContext('2d');
            ctx2.beginPath();
            ctx2.moveTo(75, 50);
            ctx2.lineTo(100, 75);
            ctx2.lineTo(100, 25);
            ctx2.fill();
        }
        var canvas3 = document.getElementById('tutorial3');
        if (canvas3.getContext) {
            var ctx3 = canvas3.getContext('2d');
            ctx3.beginPath();
            ctx3.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
            ctx3.moveTo(110, 75);
            ctx3.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
            ctx3.moveTo(65, 65);
            ctx3.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
            ctx3.moveTo(95, 65);
            ctx3.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
            ctx3.stroke();
        }
        var canvas4 = document.getElementById('tutorial4');
        if (canvas4.getContext) {
            var ctx4 = canvas4.getContext('2d');

            this.roundedRect(ctx4, 12, 12, 150, 150, 15);
            this.roundedRect(ctx4, 19, 19, 150, 150, 9);
            this.roundedRect(ctx4, 53, 53, 49, 33, 10);
            this.roundedRect(ctx4, 53, 119, 49, 16, 6);
            this.roundedRect(ctx4, 135, 53, 49, 33, 10);
            this.roundedRect(ctx4, 135, 119, 25, 49, 10);

            ctx4.beginPath();
            ctx4.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
            ctx4.lineTo(31, 37);
            ctx4.fill();

            for (var i = 0; i < 8; i++) {
                ctx4.fillRect(51 + i * 16, 35, 4, 4);
            }

            for (i = 0; i < 6; i++) {
                ctx4.fillRect(115, 51 + i * 16, 4, 4);
            }

            for (i = 0; i < 8; i++) {
                ctx4.fillRect(51 + i * 16, 99, 4, 4);
            }

            ctx4.beginPath();
            ctx4.moveTo(83, 116);
            ctx4.lineTo(83, 102);
            ctx4.bezierCurveTo(83, 94, 89, 88, 97, 88);
            ctx4.bezierCurveTo(105, 88, 111, 94, 111, 102);
            ctx4.lineTo(111, 116);
            ctx4.lineTo(106.333, 111.333);
            ctx4.lineTo(101.666, 116);
            ctx4.lineTo(97, 111.333);
            ctx4.lineTo(92.333, 116);
            ctx4.lineTo(87.666, 111.333);
            ctx4.lineTo(83, 116);
            ctx4.fill();

            ctx4.fillStyle = 'white';
            ctx4.beginPath();
            ctx4.moveTo(91, 96);
            ctx4.bezierCurveTo(88, 96, 87, 99, 87, 101);
            ctx4.bezierCurveTo(87, 103, 88, 106, 91, 106);
            ctx4.bezierCurveTo(94, 106, 95, 103, 95, 101);
            ctx4.bezierCurveTo(95, 99, 94, 96, 91, 96);
            ctx4.moveTo(103, 96);
            ctx4.bezierCurveTo(100, 96, 99, 99, 99, 101);
            ctx4.bezierCurveTo(99, 103, 100, 106, 103, 106);
            ctx4.bezierCurveTo(106, 106, 107, 103, 107, 101);
            ctx4.bezierCurveTo(107, 99, 106, 96, 103, 96);
            ctx4.fill();

            ctx4.fillStyle = 'black';
            ctx4.beginPath();
            ctx4.arc(101, 102, 2, 0, Math.PI * 2, true);
            ctx4.fill();

            ctx4.beginPath();
            ctx4.arc(89, 102, 2, 0, Math.PI * 2, true);
            ctx4.fill();
        }
        var ctx5 = document.getElementById('tutorial5').getContext('2d');
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx5.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
                    Math.floor(255 - 42.5 * j) + ', 0)';
                ctx5.fillRect(j * 25, i * 25, 25, 25);
            }
        }
    }
    roundedRect = (ctx, x, y, width, height, radius) => {
        ctx.beginPath();
        ctx.moveTo(x, y + radius);
        ctx.lineTo(x, y + height - radius);
        ctx.arcTo(x, y + height, x + radius, y + height, radius);
        ctx.lineTo(x + width - radius, y + height);
        ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
        ctx.lineTo(x + width, y + radius);
        ctx.arcTo(x + width, y, x + width - radius, y, radius);
        ctx.lineTo(x + radius, y);
        ctx.arcTo(x, y, x, y + radius, radius);
        ctx.stroke();
    }
    render() {

        return (
            <div>
                <div>
                    <canvas id="tutorial" width="150" height="150"></canvas>
                    <div>fillRect(x, y, width, height)
                    绘制一个填充的矩形。
                    strokeRect(x, y, width, height)
                    绘制矩形轮廓。
                    clearRect(x, y, width, height)
                    清除指定的矩形区域，使其完全透明。
                    这三个函数中的每一个都具有相同的参数。x并y指定矩形左上角在画布上的位置（相对于原点）。width并height提供矩形的大小。
                    </div>
                </div>
                <div>
                    <canvas id='tutorial2' width="150" height="150"></canvas>
                    <div>
                        beginPath()
                        创建一个新路径。创建后，将来的绘制命令将直接进入路径并用于构建路径。
                        路径方法
                        为对象设置不同路径的方法。
                        closePath()
                        向路径添加一条直线，转到当前子路径的起点。
                        stroke()
                        通过抚摸轮廓来绘制形状。
                        fill()
                        通过填充路径的内容区域绘制实体形状。
                        创建路径的第一步是调用beginPath()。在内部，路径存储为一起形成形状的子路径（直线，弧形等）的列表。每次调用此方法时，列表都会重置，我们可以开始绘制新形状。

                        注意：当当前路径为空时，例如在调用之后beginPath()，或在新创建的画布上moveTo()，无论实际是什么，第一个路径构造命令始终被视为a 。因此，您几乎总是希望在重置路径后专门设置起始位置。
                        第二步是调用实际指定要绘制路径的方法。我们很快就会看到这些。

                        第三步（可选步骤）是closePath()。此方法尝试通过绘制从当前点到起点的直线来闭合形状。如果形状已经关闭或列表中只有一个点，则此功能不执行任何操作。

                        注意：调用时fill()，任何打开的形状都会自动关闭，因此您不必调用closePath()。这不，当你打电话的情况stroke()。
                    </div>
                </div>
                <div>
                    <canvas id="tutorial3" width="150" height="150"></canvas>
                    <div>
                        该功能是一个非常有用的功能，它实际上不会绘制任何内容，但会成为上述路径列表的一部分moveTo()。您可能最能想到的是将笔或铅笔从一张纸上的一个地方提起，然后放在另一张纸上。

                        moveTo(x, y)
                        移动笔由指定的坐标x和y。
                        初始化或beginPath()调用画布时，通常将需要使用该moveTo()函数将起点放置在其他位置。我们还可以moveTo()用来绘制未连接的路径。看看下面的笑脸。
                    </div>
                </div>
                <div>
                    <canvas id="tutorial4" width="150" height="150"></canvas>
                    <div>
                    </div>
                </div>
                <div>
                    <canvas id="tutorial5" width="150" height="150"></canvas>
                    <div>
                    </div>
                </div>
                <div>
                    
                            <dl>
                                <dt>ddsfsdfdsf</dt>
                                <dd>fewrrwrrwerwrrwerwe</dd>
                                <dd>fewrrwrrwerwrrwerwe</dd>
                                <dd>fewrrwrrwerwrrwerwe</dd>
                                <dd>fewrrwrrwerwrrwerwe</dd>
                            </dl>
                        
                            <dl>
                                <dt>ewrwrwerew</dt>
                                <dd>dssgsfgrefrgrgergre</dd>
                            </dl>
                        
                            <dl>
                                <dt>wefwef</dt>
                                <dd>dsgrgegweggwwg</dd>
                            </dl>
                       

                    
                </div>
            </div>

        )
    }
}
export default canvasPractice;